Vscode使用

工欲善其事，必先利其器。用好VS code，打遍天下无敌手！

[TOC]

插件推荐

open in view

• 技能：在浏览器中查看
• 快捷键：
  • Alt + B 用电脑默认打开.html文件的方式打开
  • Alt + shift + B 在选定浏览器打开

Better Comments

• 技能：不同注释不同颜色
• 最佳姿势：* + 重要信息；！ + 警告；？ + 疑问；TODO： + 待做事项

Bracket Pair Colorizer

• 技能：对应括号相同颜色

Path Autocomplete

• 技能：路径补全

Path Intellisense

• 技能：自动提示文件路径，支持快速引入文件

vscode-icons

• 技能：文件格式一目了然
• 解读：左侧文件目录的文件夹和文件都会显示相应的图标

Prettier-code formatter

• 技能：代码格式化
• 解读：主要作用于js/Ts/css
• 代码规范：Prettier+VScode 治好你的代码洁癖 (opens new window)
• 批量格式化项目中所有文件

prettier --write './src/**/*.js

Beautify

• 技能：代码格式化
• 解读：主要作用于js/Ts/css/sass/html

color picker

• 技能：拾色器，直接在编辑器选择

debugger for Chrome

• 技能：在编辑器中设置断点等调试，用于chrome

Auto Rename Tag

• 技能：改变标签的时候同时改动开闭合标签

Todo HighLight

• 按F1之后，输入Todohighlist，选择相关的命令。高亮TODO/FIXME或者列出全部的TODO。

快捷键

1. js和typescript的注释模板
   • 在function上输入/** + tab
2. markdown的预览
   • ctrl + shift + v
3. 打开主命令框
   • F1 或 Ctrl + Shift + P:
4. 打开一个新窗口
   • Ctrl + Shift + N
5. 切出一个新的编辑器
   • Ctrl + \
   • Ctrl + 2：切出2个编辑器
   • Ctrl + 3：切出3个编辑器
6. 跳转到下一个 Error 或 Warning
   • F8
7. 整个文件夹中查找
   • Ctrl + Shift + F
8. 选择竖列
   • alt + shift
9. 反向缩进
   • shift + tab
10. 块区域注释
    • Shift + Alt +A
11. 选中所有出现在查询中的
    • alt + enter
12. 匹配当前选中的词汇
    • ctrl + d
13. 函数快速注释
    • 在function上输入/** tab

行操作

快捷键	作用
alt + shift + ↑	复制上一行
ctrl + shift + k	删除当前行
alt + shift + ↑	向上复制一行
alt + shift + ↓	向下复制一行
ctrl + enter	可从当前行中间插入新的下一行
ctrl + G	跳转行号

光标

快捷键	作用
Ctrl + End	移动到文件结尾
Ctrl + Home	移动到文件开头
Shift + Home	选择从光标到行尾
Ctrl + U	回退上一个光标操作
Ctrl + 鼠标左击	可选择多处光标
Shift + Alt + i	在每行末尾出现光标

区域代码折叠与展开

快捷键	作用
ctrl + shift + [	折叠区域代码
ctrl + shift + ]	展开区域代码
ctrl + k ctrl + 0	折叠所有区域代码
ctrl + k ctrl + j	展开所有区域代码

快捷输入

1. div.left + div.right + div.middle

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

开发模式

1. hot restart
   • ctrl + f5
2. terminal
   • ctrl + ~

调试

快捷键	作用
F9	添加解除断点
F5	启动调试、继续
F11 / Shift + F11	单步进入 / 单步跳出
F10	单步跳过
Ctrl + K Ctrl + I	显示悬浮
shift + f9	inline breakpoint
ctrl + f4	open loaded script
f6	pause
ctrl + shift + f5	restart
ctrl + f5	start without debugging
f11	step into
shift + f11	step out
shift + f5	stop

---

可参考：https://juejin.im/post/5b123ace6fb9a01e6f560a4b

使用技能

自定义代码片段

VS Code项目中共享自定义的代码片段方案 (opens new window)

{
  "import less": {
    // 代码片段名称
    // （在文件中敲入prefix即可生成body中的内容）
    "prefix": "@t", // 片段缩写
    "body": [
      // string[] 片段的完整内容，每个string代表一行
      "@import '@theme/$TM_FILENAME_BASE.less';",
      "$2"
    ],
    // 在文件中输入完prefix时候，弹出此内容
    "description": "@import '@theme/filename.less';"
  },
  "add css var": {
    "prefix": "cvar",
    "body": ["var(--$1);"],
    "description": "add css var"
  },
  "add textPrimary color": {
    "prefix": "ctext",
    "body": ["color: var(--textPrimary);"],
    "description": "add textPrimary color"
  },
  "add textTertiary color": {
    "prefix": "c999",
    "body": ["color: var(--textTertiary);"],
    "description": "add textTertiary color"
  },
  "eidt grid columns": {
    "prefix": "g-column",
    "body": [
      "/deep/.classify-tag .classify-tag-item .classify-tag-item-children {grid-template-columns: repeat($1, 1fr);}",
      "$2"
    ],
    "description": "eidt grid columns"
  }
}

• 通用的代码片段

// 可以同时修改的 object  
"consoleLogObject": {
  "prefix": "log",
  "body": "console.log('${1:object} :>> ', ${1:object});",
  "description": "Displays an object in the console with its name"
},
// ${TM_FILENAME_BASE} 拿到的是文件名
"exportDefaultFunction": {
  "prefix": "edf",
  "body": "export default function ${1:${TM_FILENAME_BASE}}(${2:params}) {\n\t$0\n};\n",
  "description": "Export default function in ES6 syntax"
},